<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换二维码</title>
</head>
<body style="width: 100%;margin: 0;padding: 0">
<div class="banner" style="width: 100%">
    <img src="img/<?=$_GET['date']?>/<?=$_GET['file_name']?>">
    <?php
    if($_GET['pid'] == 'noid'){  // 商品信息已经删除, 进首页即可
        $url_src = 'http://www.lcjj1688.com/';
    }else{
        $url_src = 'http://www.lcjj1688.com/index.php/Product/detailed/id/'.$_GET['pid'].'.html';
    }
    ?>
</div>
<script src="http://www.lcjj1688.com/Public/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
    // Banner加载即使用canvas绘制出新图像
    window.onload = function (){
        this.ext_name = 'image/jpeg';
        if (/.*png/.test('<?=$_GET['file_name']?>')){
            this.ext_name = 'image/png';
        }
        // 新二维码
        let banner = document.getElementsByClassName('banner')[0];
        banner.style.position = 'relative';
        let qr_node = document.createElement('div');
        qr_node.setAttribute('id','qrcode');
        qr_node.setAttribute('style','position: absolute');
        banner.appendChild(qr_node);
        let img = banner.children[0];
        let qrcode = document.getElementById('qrcode');
        let scale = parseInt(img.width) / 800;  // 缩放比
        this.img_width = img.width;
        this.img_height = img.height;
        this.img_scale = scale;
        this.img_src = img.src;
        let target_pixel = 153 ;
        qrcode.style.left = (img.width - target_pixel) + 'px';
        qrcode.style.top = (img.height - target_pixel) + 'px';
        jQuery(function () {
            jQuery('#qrcode').qrcode({
                render: "canvas",
                width: target_pixel,
                height: target_pixel,
                background: "#FFFFFF",
                text: '<?=$url_src?>'
            });
        });
        save_img();
    };

    // 拼合原图像和新二维码
    function save_img() {
        let canvas = document.getElementById('qrcode').children[0];
        let res = canvas.toDataURL(ext_name);
        let new_img = document.createElement('canvas');
        new_img.setAttribute('id','new_img');
        new_img.setAttribute('width', img_width);
        new_img.setAttribute('height', img_height);
        document.getElementsByClassName('banner')[0].appendChild(new_img);
        let ctx = document.getElementById('new_img').getContext('2d');
        let qrcode_pos_x = img_width - (153 );
        let qrcode_pos_y = img_height - (153);
        let img = new Image();
        let banners = new Image();
        banners.setAttribute('style',`width: ${img_width}px;height: ${img_height}px`);
        // 绘制Banner
        banners.onload = () => {
            ctx.beginPath();
            ctx.drawImage(banners,0,0,img_width,img_height);
            ctx.fill();
            ctx.closePath();
        };
        // banners.setAttribute("crossOrigin",'Anonymous');
        banners.src = img_src;
        // 绘制二维码
        img.onload = () => {
            //  加白色边框
            ctx.beginPath();
            ctx.fillStyle= '#FFFFFF';
            ctx.fillRect(qrcode_pos_x-5,qrcode_pos_y-5,img_width+5,img_height+5);
            ctx.closePath();
            // 白色边框结束, 绘制二维码
            ctx.beginPath();
            ctx.drawImage(img,qrcode_pos_x-2,qrcode_pos_y-2);
            ctx.fill();
            ctx.closePath();
            ctx.save();
            setTimeout(() => { // 略微停顿一下, 待完全绘制
                downloads();
            },100);
        };
        // img.setAttribute("crossOrigin",'Anonymous');
        img.src = res;
    }

    //  执行文件上传更新
    function downloads() {
        // let save_res = document.getElementById('new_img');
        let dataurl = document.getElementById('new_img').toDataURL(ext_name);
        dataURLtoBlob(dataurl,function (blob) {
            let fd = new FormData();
            fd.append("image", blob, "<?=$_GET['file_name']?>");
            fd.append('date','<?=$_GET['date']?>');
            $.ajax({
                url:'/update.php',
                type: 'POST',
                data:fd,
                processData:false,
                contentType:false,
                success: (data) => {
                    data = JSON.parse(data);
                    console.log(data.new_href);
                    data.new_href!=null && setTimeout(()=>{
                        window.location.href = data.new_href;
                    },50);
                }
            });
        });
    }

    // base64 转 blob
    function dataURLtoBlob(dataurl,callback) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        callback(new Blob([u8arr], {type:mime}));
    }

    // // 保存本地
    // function downloads() {
    //     let save_res = document.getElementById('new_img').toDataURL('image/png');
    //     let fixType = (type) =>
    //     {
    //         type = type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
    //         let r = type.match(/png|jpeg|bmp|gif/)[0];
    //         return 'image/'+r;
    //     };
    //     save_res=save_res.replace(fixType('png'),'image/octet-stream');
    //     saveImage(save_res,'test.png');
    // }

    // // 生成下载链接并跳转
    // function saveImage(data,filename)
    // {
    //     let save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    //     save_link.href=data;
    //     save_link.download=filename;
    //     let event=document.createEvent('MouseEvents');
    //     event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
    //     save_link.dispatchEvent(event);
    // }

</script>
</body>
</html>